Lenguaje de marcado HTML 5

Introducción

HTML (Hyper Text Markup Language) es un lenguaje de marcado orientado a la maquetación de páginas web. Un lenguaje de marcado es un método de codificar un documento, que aglutina texto y marcas.

Las marcas (también llamadas etiquetas) contienen información adicional acerca de la estructura o representación.

Los lenguajes de marcado tienen dos características fundamentales:

Declarativo: Se centra en la definición de la estructura de un documento.
Riguroso: tiene una interpretación unívoca, lo cual le permite la interacción con otros componentes, como por ejemplo, bases de datos.

La forma más sencilla de crear documentos web es utilizar editores de texto plano.

HTML

HTML, son las siglas en inglés de HyperText Markup Language, o lo que es lo mismo lenguaje de marcado de hipertexto.

Un hipertexto es una estructura de datos no secuencial que permite crear, agregar, enlazar y compartir información de diversas fuentes por medio de enlaces asociativos y redes.

Los elementos que se pueden distinguir en HTML son:

Etiquetas: forman parte del léxico del lenguaje. Se expresan entre < y >. Se distinguen dos tipos de etiquetas:

Abiertas: se especifican con una sola palabra y su funcionalidad queda ahí.


xxxxxxxxxx
2
1
<hr> <!--linea horizontal-->
2
<br> <!--Salto de linea-->

Cerradas: tienen dos partes, una de apertura y otra de cierre.


xxxxxxxxxx
1
1
<p><!--parrafo--></p>


xxxxxxxxxx
5
1
<ul>
2
  <li> uno </li>
3
  <li> dos </li>
4
  <li> tres </li>
5
</ul>

Atributos: permiten afinar el comportamiento de una etiqueta.
Comentarios: encerrados entre , por ejemplo:

Estructura básica de un documento HTML:


xxxxxxxxxx
11
1
<!DOCTYPE html>
2

3
<html>
4
  <head>
5
    <meta charset="utf 8">
6
    <title >Mi página de prueba</title>
7
  </head>
8
  <body>
9
    <img src="images/firefox-icon.png"alt ="Mi imagen de prueba">
10
  </body>  
11
</html>

Los dos elementos principales son:

Head: permite definir la cabecera del documento. Dentro de ella se pueden detallar elementos como el título de la página, codificación de caracteres, la hoja de estilo utilizada, etc.
Body: es el segundo elemento en una página HTML. El cuerpo permite definir acciones cuando suceden diferentes eventos. Algunos de estos eventos son: onload, onoffline, ononline, etc.

Elementos más relevantes de HTML:

NOMBRE	ETIQUETA	ACCIÓN
Parrafo	<p>	Permite representar el contenido en un parrafo.
Cabeceras	<h1>,<h2>...	Definición de títulos y cabeceras.
Listas ordenadas	<ol>	Ennumera un conjunto de elementos.
Listas no ordenadas	<ul>	Define una lista sin enumerar./td>
Imágenes	<img>	Definición de imágenes en el documento.
Hipervínculos	<a>	Introducción a hipervinculos.
Tablas	<talbe> <tr> <td>	Definición de tablas.
Formularios	<form>	Creación de formularios.
Entrada de formularios	<input>	Definición de campos para la entrada de valores en formularios.

HTML puede utilizarse con otras tecnologías:

CSS: para mejorar la apariencia visual.


xxxxxxxxxx
16
1
h1 {
2
  color: white;
3
  background: orange;
4
  border: 1px solid bl
5
  padding: 0 0 0 0;
6
  font-weight: bold;
7
}
8

9
/* begin: seaside-theme */
10
body {  
11
  background-color:white;
12
  color: black;
13
  font-family: Arial,sans-serif;
14
  margin: 0 4px 0 0;
15
  border: 12px solid;
16
}

JavaScript: para incluir programación de infinidad de funciones.


xxxxxxxxxx
14
1
<HTML.>
2
  <script type=.text/javascript,”>
3
  /*
4
  This is a multiple-
5
  line comment
6
  */
7
  var index = 0;
8
  var arr = [ ];
9
  function push(elem) {
10
  // This comment may span only this line
11
  arr[index++] = elem
12
  ]
13
  </script>
14
</HTML>

Ajax: para obtener datos de manera asíncrona y transparente para el usuario, lo cual mejora el rendimiento optimizando el ancho de banda disponible, pero obliga a tener en cuenta aspectos de seguridad.
Los lenguajes de programación PHP, Java, C#, Perl, Phyton, entre muchos otros permiten implementar lógicas de negocio avanzadas.

HTML5

Uno de los principales objetivos de HTML 5 es introducir semántica en la creación de páginas web. Los datos son legibles por las propias aplicaciones añadiendo metadatos semánticos y ontológicos.

HTML5 incorpora algunos elementos nuevos como:

<header>, <nav>, <footer>: la introducción de estas etiquetas se realiza porque normalmente la estructura de una web contiene estas secciones.
<article>: define una página externa dentro de otra. Buenas prácticas se centran en su utilización de manera aislada
<aside>: cuando se desea colocar un fragmento de una página externa relacionada con el contenido de la página original.
<section>: es similar al <div> para agrupar contenido relacionado entre sí.

Ventajas para desarrolladores:

Manejo de errores persistentes.
Semántica mejorada para elementos.
Soporte mejorado para funciones de aplicaciones web.
Web móvil más fácil.
El elemento lienzo (Canvas).
El elemento del menú.
Atributos de datos personalizables.
Almacenamiento web para reemplazar las cookies.

HTML VS HTML5

HTML	HTML5
Declaraciones largas	Declaraciones simplificadas
No soporta multimedia nativa	Soporte nativo de contenido multimedia
Gráficos vectoriales no nativos	Gráficos vectoriales nativos
No geolocalización	Geolocalización
Almacenamiento local	Cookies para almacenar datos
No Web Sockets	Comunicación mediante Web Sockets
Sin mecanismo contra errores	Soporte para procesado de errores
Escasamente portable	Portable entre plataformas
Sin atributos (charset,etc)	Con atributos que facilitan la codificación
No permite efecto drag/drop	Efecto drag/drop

Formularios

El control de formularios es otro de los aspectos mejorados en HTML 5, pues se incluyen controles en el propio lenguaje que antes se tenían que implementar con soluciones de terceros.

Algunos de estos controles son:

<fieldset> : no es un control nuevo sino que se ha modificado para asignarle nuevos atributos. Esta etiqueta permite agrupar bloques de algunos elementos.
<keygen> : es un elemento que se utilizar para encriptación. En la actualidad, se implementa en los principales navegadores aunque su estandarización no está clara.
<input>: ha sido modificado para introducir nuevos campos como e-mail, campo de búsqueda, url, teléfono, etc.


xxxxxxxxxx
9
1
<html>
2
  <form>
3
    <!-- conjunto de controles -->
4
  </form>
5
  
6
  <form action="../form-result.php" target="_blank">
7
    <input type="submit" value="Enviar"
8
  </form>  
9
</html>

by Jose Manuel Pinillos